import React, { useState, memo } from "react";

interface ChildProps {
  count: number;
}

/*
  memo:
    1. 概念：高阶组件
    2. 作用：用来缓存组件
    3. 特点：只有当组件的state或props发生变化，组件才会重新渲染
*/
// memo高阶组件，接受一个组件作为参数，返回值是一个新组件
// 作用：对Child组件进行缓存，减少不必要的重复渲染（提升代码运行性能）
export default memo(function Child({ count }: ChildProps) {
  // 1. 当状态发生变化，会重新渲染
  // 2. 当props值方式变化，会重新渲染
  // props：是父组件传递给子组件的标签数据

  // 总结：当state或props发生变化，组件才会重新渲染
  console.log("child render");

  const [num, setCount] = useState(0);

  const update = () => {
    setCount(num + 1);
  };

  return (
    <div>
      Child
      <p>count: {count}</p>
      <p>{num}</p>
      <button onClick={update}>Child update button</button>
    </div>
  );
});
